<template>
    <Dialog :app-dialog="appDialog">
        <el-form ref="ruleFormRef" class="ruleForm" :model="formData" :rules="rules">
            <el-form-item label="上传文件" prop="file_name" label-width="80px">
                <el-upload
                    ref="uploadRef"
                    class="upload-box"
                    action="#"
                    :auto-upload="false"
                    :limit="1"
                    accept=".xlsx"
                    drag
                    :file-list="fileList"
                    :on-change="onHandleChange"
                    :on-remove="onRemoveUpload">
                    <div v-if="formData.file_name" class="file-box">
                        <div><img class="file_img" src="/static/file/xls.png" alt="" /></div>
                        <div class="file_name">{{ formData.file_name }}</div>
                    </div>
                    <el-icon v-else class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        <div v-if="!formData.file_name" class="up-text">
                            将文件拖到此处，或<el-button class="down-btn" link>点击上传</el-button>
                        </div>
                    </div>
                    <template #tip>
                        <el-button class="down-btn mr-t" link @click="downTemplate">点击下载模版</el-button>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <div class="desc-box">
                    <p v-for="item in desc_arr" :key="item" class="item">{{ item }}</p>
                </div>
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRoute } from 'vue-router';

// 弹框组件
import Dialog from '@/components/Dialog.vue';
// 上传文件接口
import { uploadFile2 } from '@/api/common';
// 下载文件功能
import { DOWLOAD_FILE } from '@/utils/smartMarketing';

// 群列表接口
import { getTemp } from '@/api/smartMarketing/drainage/groupFission';

const emit = defineEmits(['submit']);

const route = useRoute();
const ruleFormRef = ref(null);
const fileList = reactive([]);
const upData = ref();
const { id } = route.query;

// 上传描述
const desc_arr = reactive([
    '1、文件必须为xlsx格式（如果为xls格式请另存为xlsx格式）',
    '2、不支持导入存在多个工作表的文件，默认只导入第一个工作表，空行将自动过滤',
    '3、手机号、邮箱等信息，在一个单元格里不支持填入多个',
    '4、尽量避免合并单元格，否则导入可能存在异常',
    '5、文件内容不能包含公式，否则可能会影响导入结果'
]);

// 表单数据
const formData = ref({
    file_name: '' // 长传文件名称
});

// 检验规则
const rules = reactive({
    file_name: [{ required: true, message: '请上传文件', trigger: 'blur' }]
});

const onHandleChange = async (file: any) => {
    formData.value.file_name = file.name;
    const params = {
        file: file.raw,
        fileName: file.name
    };
    const res = await uploadFile2(params);
    upData.value = res;
};

const onRemoveUpload = () => {
    formData.value.file_name = '';
};

// 下载模版
const downTemplate = () => {
    getTemp({ id }).then((resp: any) => {
        DOWLOAD_FILE(resp.url, resp.name);
    });
};

// 弹框取消
const cancelHandel = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.resetFields();
    appDialog.visible = false;
};
// 弹框确认
const submitHandel = async e => {
    if (!ruleFormRef.value) return;
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            emit('submit', upData.value, e);
            cancelHandel();
        }
    });
};

// 弹框配置项
const appDialog = reactive({
    visible: false,
    title: '提示',
    width: '600px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
});

// 控制上传弹框展示
const open = () => {
    appDialog.visible = true;
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.ruleForm {
    padding: 8px;

    .upload-box {
        .up-text {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .file_img {
            width: 67px;
            height: 67px;
        }

        .down-btn {
            color: #ff6b00;

            &:hover {
                color: #ff6b00;
            }
        }

        .mr-t {
            margin-top: 10px;
        }
    }

    .desc-box {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        background: #fffaf9;
        font-weight: 400;
        color: #696969;
        line-height: 20px;
    }
}
</style>
